<template>
  <div id="list-main">
    <div class="content-header">
      <a-space>
        <a-input-search
          style="width: 200px;"
          v-model="searchContent"
          @change="resetDefault(searchContent)"
          @search="handleSearch"
          size="small"
          placeholder="文件名">
          <a-button slot="enterButton">
            搜索
          </a-button>
        </a-input-search>
        <span>
          {{ currentProvider.title }} - 共 {{ totalCount }} 条数据
        </span>
      </a-space>
    </div>  
    <div class="content-body">
      <a-card
        v-if="(fileList.length > 0)"
        style="margin-top: 0px"
        :bordered="false"
        title="">
        <div style="border-bottom: 1px solid #e8e8e8;"></div>
        <a-list :loading="loading" size="large">
          <a-list-item class="list-content" :key="index" v-for="(item, index) in fileList">
            <a-list-item-meta>
              <a-avatar
                slot="avatar"
                size="default"
                shape="square"
                :icon="getFileIcon(item.type)"
                :src="getFileUrl(item)"
              >
                file
              </a-avatar>
              <span slot="title">{{ item.originalName }}</span>
              <span slot="description">{{ fileDescTrans(item)}}</span>
            </a-list-item-meta>
            <div class="list-action">
              <a-space>
                <a slot="actions" @click="handleFileDetail(item)">详情</a>
                <a slot="actions"> 
                  <a-popconfirm
                    cancelText="取消"
                    okText="确定"
                    title="确定要删除么？"
                    @confirm="handleFileDelete(item.id)">
                    <a-icon slot="icon" type="question-circle-o" style="color: red" />
                    <a-tooltip placement="top">
                      <template slot="title">
                        只删除本地数据
                      </template>
                      删除
                    </a-tooltip>
                  </a-popconfirm>
                </a>
              </a-space>
            </div>
          </a-list-item>
          <span />
          <div slot="footer" style="text-align: center; margin-top: 1px;">
            <a-button v-if="showMoreButton" @click="loadMore" :loading="loadingMore">加载更多</a-button>
          </div>
        </a-list>
      </a-card>
      <a-empty v-else description="暂无数据"/>
    </div>
    <div class="content-drawer">
      <a-drawer
        title="详情"
        :width="700"
        placement="left"
        :closable="false"
        :visible="drawerVisible"
        @close="onClose"
      >
        <a-card v-if="fileItem.type === 'image'" hoverable style="width: 340px; margin: auto; margin-top:-8px; margin-bottom:15px;">
          <img
            slot="cover"
            alt="example"
            :src="fileItem.baseUrl"
          />
        </a-card>
        <div v-else></div>
        <p :key="fIndex" v-for="(formatInfo, fIndex) in fileItem.formatUrls">
          <a-input-group compact>
            <a-input style="width: 15%;background-color: #FAFAFA;" :default-value="formatInfo.title" />
            <a-input-search style="width: 85%;" :default-value="formatInfo.content" @search="handleCopy">
              <a-button class="copy-code-button" slot="enterButton" :data-clipboard-text="formatInfo.content">
                复制
              </a-button>
            </a-input-search>
          </a-input-group>
        </p>
      </a-drawer>
    </div>
    <div>
      <a-back-top class="back-top" :visibilityHeight="100" />
    </div>
  </div>
</template>

<script>
import storage from 'store'
import { PROVIDER } from '@/store/mutation-types'
import _ from 'lodash'
import { localApi } from '@/api/main'
import Clipboard from 'clipboard'
import Bytes from 'bytes'

export default {
  name: 'StandardList',
  components: {},
  data () {
    return {
      totalCount: 0,
      fileList: [],
      currentProvider: {},
      page: 1,
      perPage: 10,
      drawerVisible: false,
      fileItem: {},
      loading: false,
      loadingMore: false,
      showMoreButton: false,
      searchContent: '',
    }
  },
  mounted () {
    this.init();
    this.getFileList();
  },
  methods: {
    init () {
      const provider = storage.get(PROVIDER)
      if (!_.isEmpty(provider)) {
        this.currentProvider = provider;
      }
      this.page = 1;
    },
    resetDefault (value) {
      if (value === '') {
        this.page = 1;
        this.getFileList('reset');
      }
    },
    handleSearch (value) {
      value = value.trim();
      if (value === 'undefined' || !value || !/[^\s]/.test(value)) {
        return false
      }
      this.searchContent = value;
      this.page = 1;
      this.getFileList('reset');
    },
    onClose() {
      this.drawerVisible = false;
      // 这个是为啥-动态绑定
      this.fileItem = {};
    },
    handleFileDetail (value) {
      this.fileItem = value;
      this.drawerVisible = true;
    },
    handleFileDelete (fileId) {
      const tmpFileList = _.cloneDeep(this.fileList);
      let params = {
        pid: this.currentProvider.pid,
        fileId: fileId,
      }
      localApi('FileDelete', params).then(res => {
        if (res.code !== 0) {
          this.$notification.warning({
            message: res.msg,
            description: '',
            duration: 2
          });
          return false;
        }
        _.remove(tmpFileList, function (value) {
          return value.id == fileId;
        });
        this.fileList = tmpFileList;
        this.totalCount--;
        return true;
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
      })
    },
    fileDescTrans (value) {
      let desc = '';
      let timeDesc = value.ftime;
      let fileSizeDesc = Bytes(value.size, {});
      let fileType = this.getFileType(value.type);
      desc += timeDesc + " | " + fileSizeDesc + " | " + fileType;
      return desc;
    },
    getFileList (isReset) {
      let params = {
        pid: this.currentProvider.pid,
        page: this.page,
        perPage: this.perPage,
        content: this.searchContent
      }
      localApi('getFileList', params).then(res => {
        if (_.isEmpty(res.data.list) && this.page !== 1) {
          this.$notification.warning({
            message: '没有数据了',
            description: '',
            duration: 1
          });
          return false
        }
        const currentList = res.data.list;
        this.totalCount = res.data.totalCount;
        if (isReset) {
          this.fileList = currentList;
        } else {
          this.fileList = this.fileList.concat(currentList)
        }
        if (this.totalCount <= this.page * this.perPage) {
          this.showMoreButton = false;
        } else {
          this.showMoreButton = true;
        }
      }).catch(err => {
        console.log('err:', err)
      }).finally(() => {
        this.loading = false
        this.loadingMore = false
      })
    },
    handleCopy () {
      const clipboard = new Clipboard('.copy-code-button')
      clipboard.on('success', e => {
          this.$notification.success({
            message: '复制成功',
            description: '',
            duration: 1
          });
          // 释放内存
          clipboard.destroy()
      })
    },
    loadMore () {
      this.loadingMore = true
      this.page += 1
      this.getFileList()
    },
    getFileIcon (type) {
      let iconType = 'file'
      if (type === 'image') {
        iconType = 'file-image'
      } else if (type === 'music') {
        iconType = 'audio'
      } else if (type === 'video') {
        iconType = 'play-square'
      }

      return iconType;
    },
    getFileUrl (item) {
      let baseUrl = null;
      if (item.type === 'image') {
        baseUrl = item.baseUrl;
      }

      return baseUrl;
    },
    getFileType (type) {
      let typeName = '其它'
      if (type === 'image') {
        typeName = '图片'
      } else if (type === 'music') {
        typeName = '音乐'
      } else if (type === 'video') {
        typeName = '视频'
      }

      return typeName;
    },
  }
}
</script>

<style lang="less" scoped>
#list-main {
  .content-header {
    padding: 10px 10px 0px 10px;
    text-align: left;
  }
  /deep/ .ant-card-body {
    padding: 10px;
  }
  .list-content {
    text-align:left;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .content-drawer {
    width: 100%;
    color: #000;
    text-align: left;
    .copy-code-button {
      background-color: #FAFAFA;
    }
    // /deep/ .ant-drawer-body {
    //   padding: 15px;
    // }
  }
  .list-action {
    width: 20%;
    text-align: center;
  }
  .back-top {
    bottom: 20px;
    right: 20px;
  }
}
</style>
